.txSection
  position absolute
  left 0px
  right 0px
  bottom 0px
  height 48px
  z-index 2000
  color var(--outerspace08)
  font-size 14px
  font-weight 400
  transition var(--standardVibe)
  border-radius 0px
  font-family 'MainFont'
  left 3px
  right 3px
  border-radius 15px
  height 30px
  background var(--ghostD)
  box-shadow cardDrop
  position absolute
  overflow hidden
  font-size 13px
  font-weight 400
  transform translateZ(0px)

  .txSectionHeader
    position absolute
    top 0
    left 0
    right 0
    height 50px
    border-bottom 1px solid var(--thick)
    justify-content space-between
    display flex
    align-items center
    text-transform uppercase
    letter-spacing 1px
    font-weight 400
    z-index 10

    .txSectionLabel
      display flex
      justify-content center
      align-items center
      z-index 10

    .txSectionNotice
      width 40px
      display flex
      justify-content center
      align-items center
      z-index 10
      transition var(--standardVibe)
      color var(--outerspace08)

    .txSectionIndicator
      width 40px
      display flex
      justify-content center
      align-items center
      z-index 10
      transform rotate(-180deg)
      transition var(--standardVibe)

  .txSectionLabelLeft
    position absolute
    left 0
    right 0
    width 62px
    height 30px
    box-sizing border-box
    // border-right 1px solid var(--thick)
    background var(--ghostD)
    box-shadow 0px 3px 3px var(--ghostC)
    // border-top-left-radius 3px
    // border-bottom-left-radius 3px
    // border-top-right-radius 15px
    border-top-right-radius 6px
    border-bottom-right-radius 6px
    border-bottom-left-radius 16px
    border-top-left-radius 16px
    text-align center
    display flex
    overflow hidden

    .txSectionLabelLeftInner
      position absolute
      top 6px
      right 0
      bottom 0
      left 5px
      text-align center

      .gwei
        text-transform uppercase
        font-size 9px
        font-weight 300
        padding-left 2px
        letter-spacing 0px
        position relative
        top -1px

  .txSectionLabelTime
    border-radius 6px
    position absolute
    right 66px
    width 36px
    height 30px
    background var(--ghostC)
    box-shadow 0px 3px 3px var(--ghostC)
    display flex
    text-align center
    justify-content center
    align-items center
    display none
    // letter-spacing -0.5px

    .timeUnit
      text-transform uppercase
      font-size 8px
      font-weight 300
      padding-left 0px
      letter-spacing 0px
      padding-left 0px
      padding-top 3px
      
  .txSectionLabelRight
    position absolute
    right 0px
    width 62px
    height 30px
    box-sizing border-box
    border-top-right-radius 16px
    border-bottom-right-radius 16px
    border-bottom-left-radius 6px
    border-top-left-radius 6px
    background var(--ghostD)
    box-shadow 0px 3px 3px var(--ghostC)
    padding 8px
    text-align center
    text-transform uppercase
    font-size 10px
    font-weight 300

  .networkFeeSelectedHalo
    height 38px
    border-radius 19px
    position absolute 
    top -2px
    left 0px
    right 0px
    box-sizing border-box
    pointer-events none
    z-index 5000000
    // box-shadow 0px 1px 5px var(--thick)

    .customHaloMarker
      position absolute
      top 0px
      left 67px
      bottom 0px
      right 64px
      z-index 200000000
      margin-left -3px

      .customHaloMarkerInner
        position absolute
        top -1px
        left -6px
        bottom -1px
        width 6px
        border-radius 3px
        box-sizing border-box
        // border 3px solid var(--spacewhite)
        // box-shadow cardDrop, 0px 2px 2px var(--thick)

        .customHaloMarkerLine
          position absolute
          top 0px
          left 0
          bottom 0px
          width 4px
          border-radius 2px
          // margin-left -6px
          background var(--good)

  .networkFeeSelectedHaloClickwrap
    z-index 200 !important
    height 38px
    border-radius 19px
    position absolute 
    top -2px
    left 6px
    right 6px
    box-sizing border-box
    pointer-events none
    z-index 5000000
    // box-shadow 0px 1px 5px var(--doubleThick)

    .networkFeeSelectedHaloClick
      position absolute
      top -1px
      left 0
      bottom 0
      right 0
      z-index 40000000000
      background var(--ghostD)
      border-radius 19px
      opacity 0

  .networkFeeSelectedHaloShadow // Stays on currently selected fee
    background none
    border 2px solid var(--good)
    z-index 200001
    pointer-events none
    box-shadow none
    // transition var(--standardFast), 0.1s linear opacity 0.1s
    // box-shadow 0px 4px 10px var(--thick)
    will-change opacity

  .networkFeeOptions
    position absolute
    left 0px
    right 0px
    top 72px
    padding-top 10px
    transition var(--standardVibe)
    transform translateZ(0px)
    z-index 100
    background rgba(255, 255, 255, 0)

  .networkFeeOptionHover
    .networkFeeOptionHoverInset
      background var(--ghostC)
      // box-shadow 0px 5px 40px 0px var(--thick)

  .networkFeeOption
    position relative
    height 30px
    width 100%
    padding 5px 0px 5px 0px
    border-radius 15px
    z-index 100
    transform translateZ(0px)
    top -5px
    transition var(--standardVibe)
    cursor pointer
    *
      pointer-events none

    .networkFeeOptionHoverInset
      position absolute 
      top 5px
      left 0
      right 0
      bottom 5px
      border-radius 15px
      transform translateZ(0px)

    div, svg
      pointer-events none

  // .networkFeeOption:hover
  //   .networkFeeOptionBack
  //     background var(--ghostC)

  .networkFeeTotalWarn
    .networkFeeTotalUSD
      color var(--bad)

  .networkFeeTotal
    position absolute
    left 62px
    right 62px
    height 30px
    box-sizing border-box
    display flex
    justify-content center
    font-size 14px
    letter-spacing 0px

    .networkFeeTotalSection
      padding 0px 4px

    .networkFeeTotalETH
      font-size 16px
      display flex
      justify-content center
      align-items center

     .networkFeeTotalUSD
       margin-top 6px
       
      .networkFeeTotalApprox
        margin-top 6px
        margin-left -6px
        margin-right -3px

  // .networkFeeTotalUSD
    // position absolute
    // left 230px
    // padding-left 5px
    // width 100px
    // height 30px
    // box-sizing border-box
    // display flex
    // justify-content center
    // align-items center
    // border-right 1px solid var(--thick)

  // .transactionTotals
  //   display flex
  //   justify-content center
  //   align-items center
  //   font-size 18px
  //   letter-spacing 0
  //   // flex-direction column
  //
  // .transactionTotalUSD
  //   margin-left 4px
  //   padding 0px 10px
  //   font-size 14px
  //   border-radius 9px
  //   height 18px
  //   background var(--ghostD)
  //   box-shadow cardDrop
  //   font-weight 400
  //   box-sizing border-box

  .transactionWarning
    color var(--bad)

  .transactionFeeWarning
    margin-left 6px
    padding-bottom 8px
    color var(--bad)

  .transactionFee
    .transactionTotals
      font-size 12px

    .transactionTotalUSD
      font-size 15px
      padding 2px 8px
      font-weight 300

.txSectionBody
  position absolute
  color var(--outerspace08)
  top 50px
  left 0
  right 0
  bottom 0
  display flex
  padding 16px 14px
  user-select all
  overflow hidden
  z-index 9

  .txSectionBodyInner
    opacity 0
    top -100px
    position relative
    max-width 100%
    width 100%
    height 100%
    font-size 13px
    text-transform none
    transition var(--standardVibe)
    overflow-wrap break-word
    word-wrap break-word
    font-family 'FiraCode'
    overflow-x hidden
    overlflow-y scroll

.txSectionSelected
  position absolute
  bottom 5px
  left 5px
  right 5px
  top 65px

  .txSectionHeader
    .txSectionIndicator
      transform rotate(0deg)

  .txSectionBody
    .txSectionBodyInner
      opacity 1
      top 0px

// .transactionData
//   position absolute
//   bottom 130px
//   left 5px
//   right 5px
//   top 190px
//   z-index 2000
//   display flex
//   justify-content center
//   align-items center
//   background var(--ghostD)
//   color var(--outerspace08)
//   font-size 14px
//   font-weight 400
//   letter-spacing 1px
//   text-transform uppercase
//   transition var(--standardVibe)
//   overflow hidden
//   box-shadow 0px 2px 0px var(--thick), 0px 8px 8px -2px var(--thick), 0px 0px 10px -2px var(--thick)
//   border-radius 3px

.txData
  height 18px
  // margin-top -10px
  // padding-bottom 10px

// .transactionDataHeader
//   position absolute
//   top 10px
//   left 50%
//   right 0
//   height 18px
//   // width 170px
//   // margin-left -90px
//   // border-bottom 1px solid var(--thick)
//   justify-content space-between
//   display flex
//   align-items center
//   text-transform uppercase
//   letter-spacing 1px
//   font-weight 400
//   z-index 10
//   background var(--ghostD)
//   border-radius 9px

//   .transactionDataLabel
//     display flex
//     justify-content center
//     align-items center
//     z-index 10
//     transition var(--standardVibe)

//   .transactionDataNotice
//     width 18px
//     display flex
//     justify-content center
//     align-items center
//     z-index 10
//     transition var(--standardVibe)
//     color var(--outerspace08)

//   .transactionDataIndicator
//   // width 22px
//     display flex
//     justify-content center
//     align-items center
//     z-index 10
//     margin-bottom 2px
//     margin-right 6px
//     transform rotate(-180deg)
//     transition var(--standardVibe)Slow

.txFee
  background var(--ghostD)
  box-shadow cardDrop // , 0px 2px 2px var(--thin)
  transform translateY(-180px)
  zIndex 3
  height 31px
  left 0px
  right 0px
  padding 0px 0px
  // transition var(--standardVibe)

  .txFeeUpdateRealtime
    position absolute
    top 0px
    left 0px
    right 0px
    bottom 0px
    // min-height 202px
    z-index 1000000
    pointer-events none
    z-index 2
    color var(--good)
    overflow hidden
    transition var(--standardVibe)
    // background var(--ghostD)
    transform translateY(-100px)
    border-radius 6px

    .txFeeUpdateRealtimeInner
      position absolute
      top -200px
      bottom -200px
      right -200px
      left -200px
      color var(--good)
      opacity 0.1
      // TODO: This only works for dark colorway currently
      // background-image url('./Tray/Panel/Main/Account/Requests/style/wave.svg')
      background-position 0px 0px
      // background blue

      .txFeeUpdateRealtimeTitle
        position absolute
        top 0%
        margin-top -9px
        font-size 10px
        padding-bottom 1px
        left 80px
        right 80px
        border-radius 8px
        // border-bottom-right-radius 16px
        text-align center
        color var(--outerspace08)
        font-weight 300
        text-transform uppercase
        box-sizing border-box
        z-index 40000
        letter-spacing 2px
        padding-left 2px
        background rgba(255, 255, 255, 1)
        box-shadow 0px 5px 5px var(--doubleThick)
        display none

  .txFeeClose
    position absolute
    right 0
    left 0
    bottom 0px
    height 20px
    display flex
    justify-content center
    align-items center
    flex-direction column
    letter-spacing 6px
    margin-left 6px
    font-weight 300
    font-size 9px
    color var(--outerspace03)
    transition var(--standardFast)

  .txFeeClose:hover
    color var(--outerspace05)

  .txFeeHover
    position absolute
    left 50%
    top -4px
    bottom 4px
    width 186px
    margin-left -93px
    border-radius 8px
    z-index 4000
    padding 4px
    box-sizing border-box
    opacity 0
    font-weight 400
    font-size 11px
    letter-spacing 0.5px
    transition var(--standardFast)
    background var(--ghostD)
    text-align center
    text-transform uppercase
    cursor pointer
    *
      pointer-events none


  .txFeeHover:hover
    top 4px
    opacity 1

  .txFeeTitle
    position absolute
    font-size 19px
    font-weight 300
    left 10px
    width 60px
    bottom 292px
    height 68px
    display flex
    justify-content center
    align-items center
    flex-direction column
    display none


  .txFeeInputs
    position absolute
    top 11px
    right 7px
    left 7px
    height 48px
    transition var(--standardFast)
    display flex
    justify-content space-between
    align-items center
    z-index 20
    // transform translateY(-200px)
    // transition-delay 0s

    .txFeeGwei
      display flex
      justify-content center
      align-items center
      flex-direction column
      transition var(--standardFast)
      // transition-delay 0.1s

      .txFeeGweiValue
        width 152px
        border-top-right-radius 4px
        border-bottom-right-radius 4px

    .txFeeLimit
      display flex
      justify-content center
      align-items center
      flex-direction column
      transition var(--standardFast)

      .txFeeGweiValue
        width 152px
        border-top-left-radius 4px
        border-bottom-left-radius 4px

  .txFeeSummary
    position absolute
    left 7px
    right 7px
    bottom 6px
    height 48px
    // transform translateY(1000px)
    opacity 0
    border-radius 6px
    border 1px solid var(--ghostB)
    background var(--ghostD)
    z-index 2

    .txFeeSummaryValue
      font-size 20px
      font-weight 400
      line-height 20px
      min-width 50px
      text-align center
      display flex
      justify-content center

      .txFeeSummaryTotalUSD
        font-size 16px
        margin-top 1px
        letter-spacing 0px

      .txFeeSummaryTimeContext, .txFeeSummarySymbol, .txFeeSummaryEquivalentSymbol
        font-size 16px
        margin-top 1px
        margin-left -1px

      .txFeeSummaryUSDSymbol
        font-size 13px
        margin-top 1px
        font-weight 300

      .txFeeSummarySymbol
        font-size 16px
        margin-right 0px
        font-weight 400
        margin-top 0px
        
      .txFeeSummaryEquivalentSymbol
        margin-left 2px

      .txFeeSummaryUSDSymbol
        margin-left 4px
        margin-right -2px

      .txFeeSummaryTimeValue
        font-size 20px
        margin 0px 1px 0px 0px
        font-weight 400
        min-width 12px
        text-align right
        letter-spacing -2px

      .txFeeSummaryTimeUnit
        font-size 13px
        font-weight 300
        margin-top 0px
        margin-left 1px
      
    .txFeeSummaryLabel
      font-size 11px
      font-weight 400
      letter-spacing 1px
      margin-left 1px

  .txFeeTotal
    padding 4px
    display flex
    justify-content center
    align-items center
    flex-direction column
    transition var(--standardVibe)
    border-left 1px solid var(--thick)
    position absolute
    top 10px
    bottom 8px
    right 0px
    left 95px

  .txFeeTotalWarn
    .txFeeSummaryTotalUSD
      color var(--bad)
    .txFeeSummaryUSDSymbol
      color var(--bad)

  .txFeeTotalUSD
    font-size 16px

  .txFeeTime
    display flex
    justify-content center
    align-items center
    flex-direction column
    transition var(--standardVibe)
    width 69px
    border-right 1px solid var(--thick)
    position absolute
    left 0
    top 10px
    bottom 8px

  .txFeeGweiValue
    font-size 22px
    font-weight 400
    background var(--ghostD)
    border-radius 6px
    height 32px
    box-shadow 0px 2px 2px var(--thin), cardDrop
    display flex
    justify-content center
    align-items center

    ::selection
      background: var(--doubleThick)

    input 
      background transparent
      outline 0
      border 0
      border-radius 6px
      height 24px
      padding 4px 4px 7px 4px
      width 100%
      text-align center
      font-size 22px
      font-weight 300
      color var(--outerspace08)
      font-family 'MainFont'

  .txFeeGweiLabel
    font-size 11px
    font-weight 400
    letter-spacing 1px
    margin-left 1px
    margin-top 8px

  .networkFeeLabel
    position absolute
    top 0px
    right 0
    height 30px
    border-top-right-radius 15px
    border-bottom-left-radius 15px
    padding 0px 20px 0px 20px
    height 40px
    display none // flex
    justify-content center
    align-items center
    transition var(--standardVibe)
    position absolute
    color var(--outerspace08)
    background var(--ghostC)
    box-shadow cardDrop
    letter-spacing 2px
    font-weight 400
    font-size 14px
    text-transform uppercase

.txFeeExpanded
  transform translateY(-20px)
  height 350px
  z-index 20000
  border-radius 8px

  .customGasPriceBar
    transform translate(0px, 0px)
    transition slowRocket

  .txFeeUpdateRealtime
    transform translateY(0px)

  .txFeeSummary
    transition var(--standard)
    opacity 1
  
  .txFeeSummaryHover     
    // background var(--outerspace)
    background var(--ghostD)
    // box-shadow 0px 10px 5px -5px var(--thick), 0px 0px 10px 0px var(--thick)  // , 0px -25px 20px -15px var(--thick)

  .networkFeeOptions
    left 0px
    right 0px

.customGasPriceBar
  position absolute
  bottom 12px
  left 71px
  width 40px
  height 14px
  display flex
  justify-content center
  align-items center
  z-index 20
  transition var(--standard)
  transition-dealy 0.32s
  transform translate(0px, 52px) rotate(0deg)

  .customGasPriceBarInner
    width 2px
    height 2px
    border-radius 2px
    position relative
    background rgb(250, 100, 155)

    .customGasPriceBarRocket
      position absolute
      transform translate(-9.5px, -21px)

    .customGasPriceBarStreak
      position absolute
      top 1px
      bottom 2px
      width 1px
      border-radius 2px
      opacity 0.7
      background rgb(250, 100, 155)

    svg
      transform rotate(-45deg)
